import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    ScrollView,
    FlatList,
} from 'react-native';
import { MtChar } from 'martian-ui';
const { MtW1, MtW3, MtW2, MtLabel, MtT3 } = MtChar;
import { bindActionCreators } from 'redux';
import {connect} from 'react-redux';
const EntityLabels = require('../constants/entities');
import { fetchRoomList } from '../action/girlAction';
const values = require('lodash/values');

import YaguanRoomDevices from '../container/YaguanRoomDevices';
import LabelBar from '../components/common/ArgraceUI/LabelBar'
//引用插件

// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');

class CommonRoomlist extends Component {

    constructor(props) {
        super(props);
        this.state = {

        };
    }

    componentDidMount() {

        const {id, assessToken } = this.props;

        // this.getRoomAndDevice(id, assessToken);
    }
    getRoomAndDevice(houseID, assessToken) {
        const {fetchRoomList} = this.props;
        fetchRoomList(houseID, assessToken);
    }


    // 专用房间
    renderTopic() {
        const {room, navigator} = this.props;
        return (
            <View>
                <LabelBar
                  onPress={() => {}}
                  title="常用房间"
                  containerStyle={{marginTop: 17, marginBottom: 5}}
                  titleStyle={{fontSize: 17, color: '#333333', fontWeight: 'bold'}}
                  value='全部'
                  style={{textAlign: 'right', fontSize: 14, color: '#00A5AD'}}
                  disableIcon={true}
                />
                <View style={styles.moduleBox}>
                    <FlatList
                        data={room}
                        keyExtractor={(item, index) => index}
                        renderItem={this.renderTopicItem}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                    />
                </View>
            </View>
        )
    }
    renderTopicItem = ({ item }) => {
        const { devicesEntities, id , navigator} = this.props;
        const deviceArr = item && item.devices.map((list) => {
            const device = devicesEntities && devicesEntities[list];
            return device;
            }
          ).filter(ele => ele.deviceName !== null);
      // console.warn('deviceArdeviceArrr'+JSON.stringify(deviceArr))


      return (
            <TouchableOpacity
                style={styles.commonHouseListboX}
                onPress={()=>{
                    this.props.navigator.push({
                        component: YaguanRoomDevices,
                        params: {
                            navigator,
                            deviceIds: item.devices,
                            name: item.name,
							              roomId: item.id,
                            gatewayId: this.props.gatewayId,
                            productKey:this.props.productKey,
                            deviceName:this.props.deviceName,
                            houseId: id,
                        }
                    })
                }}

            >
                <MtW1>
                    {item.name}
                </MtW1>
                <MtW3
                    style={{ marginTop: 8, color:'#AFC3CD' }}
                >
                    {`设备在线: ${deviceArr.length}`}
                </MtW3>
                <MtW3
                    style={{ marginTop: 15, color:'#AFC3CD'}}
                >
                    N/A
                </MtW3>
                <View
                    style={{
                        borderWidth:1,
                        borderColor:'#fff',
                        borderRadius:20,
                        marginTop: 15,
                        width: 60,
                        height: 30,
                        justifyContent: 'center',
                        alignItems: 'center',
                    }}
                >
                    <MtW2>
                        会议
                    </MtW2>
                </View>
            </TouchableOpacity>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                {this.renderTopic()}
            </View>
        );
    }
}


function mappingStateToProps(state, Porps) {
    const entities= state['entities'];
    const isFetching= state['isFetching'];

    const roomEntities = entities[EntityLabels.room];

    const devicesEntities = entities[EntityLabels.devices];
    const roomIsFetching = isFetching[EntityLabels.room];
    const room = roomEntities && values(roomEntities).filter(ele => ele.houseId === Porps.id);

    return {
        room,
        devicesEntities,

    };
}
function mapDispatchToProps(dispatch) {
    const actions = {
        fetchRoomList,
    };
    return bindActionCreators(actions, dispatch);
}

const styles = StyleSheet.create({
    commonHouseListboX: {
        width: width/2.5,
        height: width/2,
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft:15,
        backgroundColor: '#6F90A3',
        borderRadius: 12,
    },

    container: {
        flex: 1,
        alignItems: 'center',
    },
    bannerImg: {
        height: width * 40 / 75,
        width: width,
    },
    wrapper: {
        width: width,
    },
    paginationStyle: {
        bottom: 6,
    },
    dotStyle: {
        width: 22,
        height: 3,
        backgroundColor: '#fff',
        opacity: 0.4,
        borderRadius: 0,
    },
    activeDotStyle: {
        width: 22,
        height: 3,
        backgroundColor: '#fff',
        borderRadius: 0,
    },
    moduleBox: {
        width: width,
        marginLeft: 20,
        paddingBottom: 10,
    },


});


module.exports = connect(mappingStateToProps, mapDispatchToProps)(CommonRoomlist);
